<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽文件</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        #target{
            height: 200px;
            border: 5px dashed #c0c0c0;
            color: #505050;
            padding: 20px;
            font-size: 40px;
            cursor: pointer;
            text-align: center;
            -webkit-user-select: none;
        }
        #target.actived{
            border-color: #888;
            color: #080808;
            box-shadow: 0 0 80px #e0e0e0 inset;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h3>拖拽文件</h3>
    </div>
    <div class="jumbotron">
        <p>我们这里测试拖拽文件</p>
        <img src="test.png">
    </div>
    <div id="target">
        拖拽文件进来
        <ul id="result" class="list-group"></ul>
    </div>
</div>
</body>
<script>
    (function(){
        var target = document.querySelector("#target");
        var fileList = document.querySelector('#result');
        //注册拖拽进入事件
        target.addEventListener("dragenter",function(){
            this.classList.add("actived");  //添加样式
        })
        //注册拖拽文件离开事件
        target.addEventListener("dragleave",function(){
            this.classList.remove("actived");  //添加样式
        })
        //注册落地事件之前必须要先阻止默认事件，这里在滑动里面阻止默认事件
        target.addEventListener("dragover",function(e){
            e.preventDefault(); //阻止默认事件
            e.stopPropagation();
        })
        //注册松手落地事件
        target.addEventListener("drop",function(e){
            //判断拖入进来的是文件，图片还是文字，分别处理
            if(e.dataTransfer.files.length){
                //拖入的是文件
                var files = e.dataTransfer.files;
                for (var i = 0; i < files.length; i++) {
                    var li = document.createElement('li');
                    li.setAttribute('class', 'list-group-item');
                    // 创建信息的子节点
                    li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
                    fileList.appendChild(li);
                }
            }else{
                //不是文件
                var data = e.dataTransfer.getData('text/plain'); //判断拖入的是文本还是图片
                if(data){
                    //拖入的是文本,直接置换
                    target.innerHTML = data;
                }else{
                    //拖入的是图片
                    var imgElem = document.createElement("img");
                    imgElem.src = data;
                    target.appendChild(imgElem);
                }
            }
        })
    })()
</script>
</html>